<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>修改密码</title>
</head>
<body>
<header data-am-widget="header"
        class="am-header am-header-default" style="background-color: #FF856E;">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.go(-1);" style="float: left">
            <i class="am-icon-chevron-left" style="font-size: 22px;color: white;"></i>
        </a>
        <span style="font-size: 16px;color:white; ">修改密码</span>
    </div>


    <div class="am-header-right am-header-nav">

    </div>
</header>

<div class="am-list-news am-list-news-default" data-am-widget="list_news" style="margin: 5% auto;background-color: white;">
    <div class="am-list-news-bd" >
        <ul class="am-list" style="padding-left:5%;padding-right: 5%;">
            <li style="border-top: 0;" class="am-g am-list-item-dated">
               <a class="am-list-item-hd">旧密码:</a>
               <span class="am-list-date am-u-sm-10">
                   <input type="password" id="password" class="password" value="">
               </span>
            </li>
            <li style="" class="am-g am-list-item-dated" >
                <a class="am-list-item-hd">新密码:</a>
                <span class="am-list-date am-u-sm-10">
                    <input type="password" id="passwordNew" class="passwordNew" value="">
                </span>
            </li>
            <li style="" class="am-g am-list-item-dated" >
                <a class="am-list-item-hd">确&nbsp;&nbsp;&nbsp;&nbsp;认:</a>
                <span class="am-list-date am-u-sm-10">
                    <input type="password" id="confirmpassword" class="confirmpassword" value="">
                </span>
            </li>
        </ul>
    </div>
</div>

<div class="am-form-group am-u-sm-12">
    <button type="button" id='updateBtn' class="am-btn am-btn-secondary" style="width: 100%;border-radius: 10px;outline: none;">立即修改</button>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
<script>
    $(function () {
        $("#confirmpassword").bind('input propertychange',function () {
            let password = $("#passwordNew").val();
            let confirmpassword = $("#confirmpassword").val();
            if (password != confirmpassword){
                $("#confirmpassword").css("color","red")
            } else if (password == confirmpassword) {
                $("#confirmpassword").css("color","black")
            }
        });

        $("#updateBtn").click(function () {
            const password = $("#password").val();
            const passwordNew = $("#passwordNew").val();
            const confirmpassword = $("#confirmpassword").val();
            if ( password != "" &&  passwordNew != "" && confirmpassword != "" && passwordNew == confirmpassword){
                resetPassword(password, passwordNew);
            }
        })

    })

</script>
</html>